[AngularJS2] select 태그 option에 for문 사용시 기본값 사용 방법

AngularJS에서 select 태그의 option에 ngFor를 사용하는 경우 기본값을 사용하는 방법을 알아봅니다.

# select 태그 ngfor문에 기본값 사용하기

먼저 기본값을 사용하기 위해서는 ngFor가 적용된 option 태그에 [selected]를 사용해야합니다.

[selected]="조건값"

조건이 true인 경우에는 기본값으로 선택되어 나타나게 됩니다.

! ngFor selected 예제보기

간단한 예제입니다. myDates라는 배열이 [ 1, 7, 30, 90, 365 ]인 경우 만약 value가 365인 경우에 기본값으로 설정하려면 어떻게 할까요? 아래와 같이 사용할 수 있습니다.

이제 date가 365인 값이 기본 설정되어 나타납니다. 여기까지 간단하게  select 태그의 기본값 설정 방법을 알아봤습니다.

! noFor문의 index 값을 select에 사용하는 방법

만약 select 태그의 option에 데이터 값이 아닌 원하는 index값을 선택하여 selected를 적용하려면 어떻게 하는지 알아봅니다.

이처럼 let i = index를 추가하여 i 값 변수의 index를 조건으로 사용하는 방법입니다.

@ index를 사용한 selected 설정이 안되는 경우
이 경우 [ngModel] 값이 설정되었는지 확인을 해야합니다. ngModel를 사용하는 경우 해당 변수값이 설정될 때 기본값을 입력해야만 합니다.